<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jLook</title>
<link rel="stylesheet" type="text/css" href="Module/jlook/_css/styles.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="Module/jlook/_javascript/jLook/templates/default/default.css" />
<script type="text/javascript" src="Module/jlook/jLook-latest.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#testForm").jLook({selectHeight: '180'});
		
		$('#testSerializado').click(function(){
			alert($('#testForm :hidden').serialize());
			return false;
		});
	});
</script>
</head>
<body>

<div id="wrapper">
<h1>jLook example <strong>v0.8 (Beta)</strong></h1>
<div id="content">
<p class="title111">jLook simple example, for collaborations or bugs reports: seba (at) envero.org</p>
<p class="atention">Final version coming soon! (<strong> January 2008</strong> )</p>
<form id="testForm" name="testForm" action="" method="post">
	<table width="500px" border="0" cellspacing="0" cellpadding="2">
		<tr>
			<td><label for="title">标题</label></td>
			<td><input type="text" name="title" id="title" /></td>
		</tr>
		<tr>
			<td><label for="subtitle">姓名</label></td>
			<td><input type="text" name="subtitle" id="subtitle" style="width: 300px;" /></td>
		</tr>
		<tr>
			<td><label>单选框</label></td>
			<td><table width="40%" border="0" cellspacing="0" cellpadding="2">
					<tr>
						<td width="12%"><input type="radio" name="publi" id="radio3" value="1" /></td>
						<td width="18%">年</td>
						<td width="12%"><input type="radio" name="publi" id="radio5" value="2" /></td>
						<td width="27%">月 </td>
						<td width="12%"><input type="radio" name="publi" id="radio4" value="3" /></td>
						<td width="19%">日 </td>
					</tr>
			</table></td>
		</tr>
		<tr>
			<td><label for="new">多选框</label></td>
			<td><input name="related" type="checkbox" id="related" value="1" /></td>
		</tr>
		<tr>
			<td><label for="new"></label></td>
			<td><input name="new" type="checkbox" id="new" value="1" /></td>
		</tr>
		<tr>
          <td><label for="category">补助类别</label></td>
		  <td>
		  	<select name="category" id="category" style="float: right;">
	              <option value="sdf">--请选择--</option>
	              <option value="1">生活补助</option>
	              <option value="2">车费补助</option>
	              <option value="3" selected="selected">中餐补助</option>
	              <option value="4">住房补助</option>
	              <option value="5">其他补助</option>
            </select>
          </td>
	    </tr>
		<tr>
			<td colspan="2">
				<textarea ></textarea>
			</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td><input type="submit" value="Serialize" id="testSerializado" /> </td>
		</tr>
	</table>
</form>
	<div class="download">		<a href="#" title="download jLook (coming soon!)"><img src="_img/download-jlook.jpg" alt="download jLook (coming soon!)" width="173" height="41" /></a> <a href="javascript:void(0);" ><img src="_img/download-jquery.jpg" alt="download jquery" width="173" height="41" /></a></div>
	<div class="code">
		<h2>Example code</h2>
		<p><span class="red">&lt;script type=&quot;text/javascript&quot;&gt;</span><br />
					<span class="blue"> &nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function(){<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#testForm&quot;).jLook();<br />
					&nbsp;&nbsp;&nbsp;&nbsp;});<br />
							</span>
					<span class="red">&lt;/script&gt;</span>
			</p>
	</div>
</div>
	<div id="footer">
		envero.org	| jLook Plugin for jQuery
	</div>
</div>
<div style="height:20px;"></div>

</body>
</html>
